<template>
  <div class="preloading-container">
    <div
      v-if="title"
      class="header loading loading-animate-two"
      :class="{
        'title-left': title_place === 'left',
        'title-right': title_place === 'right',
      }"
    ></div>
    <!-- with image -->
    <div v-if="img" class="pre-loading-img">
      <div style="width: 76%">
        <div class="loading-row">
          <span
            class="loading-span loading-animate-two"
            style="width: 90%"
          ></span>
        </div>
        <div class="loading-row">
          <span
            class="loading-span loading-animate-two"
            style="width: 32%"
          ></span>
          <span
            class="loading-span loading-animate-two"
            style="width: 60%; margin-left: 2%"
          ></span>
        </div>
        <div class="loading-row">
          <span
            class="loading-span loading-animate-two"
            style="width: 26%"
          ></span>
          <span
            class="loading-span loading-animate-two"
            style="width: 36%; margin-left: 2%"
          ></span>
          <span
            class="loading-span loading-animate-two"
            style="width: 25%; margin-left: 2%"
          ></span>
        </div>
        <div class="loading-row">
          <span
            class="loading-span loading-animate-two"
            style="width: 56%"
          ></span>
          <span
            class="loading-span loading-animate-two"
            style="width: 35%; margin-left: 2%"
          ></span>
        </div>
      </div>
      <div class="img-content loading-animate-two"></div>
    </div>
    <!-- without image -->
    <div v-else>
      <div class="loading-row">
        <span
          class="loading-span loading-animate-two"
          style="width: 90%"
        ></span>
      </div>
      <div class="loading-row">
        <span
          class="loading-span loading-animate-two"
          style="width: 32%"
        ></span>
        <span
          class="loading-span loading-animate-two"
          style="width: 60%; margin-left: 2%"
        ></span>
      </div>
      <div class="loading-row">
        <span
          class="loading-span loading-animate-two"
          style="width: 26%"
        ></span>
        <span
          class="loading-span loading-animate-two"
          style="width: 36%; margin-left: 2%"
        ></span>
        <span
          class="loading-span loading-animate-two"
          style="width: 25%; margin-left: 2%"
        ></span>
      </div>
      <div class="loading-row">
        <span
          class="loading-span loading-animate-two"
          style="width: 56%"
        ></span>
        <span
          class="loading-span loading-animate-two"
          style="width: 35%; margin-left: 2%"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    loading: Boolean,
    img: Boolean,
    title: Boolean,
    title_place: String
  }
}
</script>

<style scoped="scoped" lang="less" >
.preloading-container {
  padding: 0.4rem 0.266666rem;
  font-size: 0.48rem;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
  background-color: #ffffff;
}
.span-content {
  width: 70%;
}
.header {
  width: 40%;
  height: 0.666666rem;
  margin: 0 auto 0.266666rem;
}
.header.title-left {
  margin: 0 0 0.266666rem 0;
  display: inline-block;
}
.header.title-right {
  margin: 0 0 0.266666rem 60%;
}
.loading-span {
  height: 0.426666rem;
  display: inline-block;
}
.loading-row {
  margin-bottom: 0.213333rem;
}
.loading-row:last-of-type {
  margin-bottom: 0;
}
.pre-loading-img {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.img-content {
  width: 20vw;
  height: 20vw;
}
.loading-animate {
  border-radius: 0.026666rem;
  background: linear-gradient(
    90deg,
    rgba(207, 216, 220, 0.2),
    rgba(207, 216, 220, 0.6),
    rgba(207, 216, 220, 0.2)
  );
  animation: loading 1.4s ease infinite;
  background-size: 600% 600%;
}

@keyframes loading {
0% 100% {
    background-position: 0 50%;
  }
50% {
    background-position: 100% 50%;
 }
}
.loading-animate-two {
  border-radius: 0.026666rem;
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 40%, #f2f2f2 60%);
  animation: loading-two 1.4s ease infinite;
  background-size: 400% 100%;
}
@keyframes loading-two {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

</style>
